表单

2023-09-02 02:29| 来源: 网络整理| 查看: 265

表单 - 页面元素在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块来完成各种交互。依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）小睹为快通过上述的小小演示，你已经大致了解了一波 layui 的表单模块，你可能会觉得她还算不错，但并不太过瘾？譬如你希望看到日期选择、图片上传等等。然而你必须认识到，本篇文档核心介绍的是表单元素，对于日期、上传等更多丰富的元素，其实也是可以很方便地穿插在内的。

下述是【小睹为快】的HTML结构：

输入框密码框辅助文字选择框北京上海广州深圳杭州复选框开关单选框文本域立即提交重置 //Demo layui.use('form', function(){ var form = layui.form; //监听提交 form.on('submit(formDemo)', function(data){ layer.msg(JSON.stringify(data.field)); return false; }); });

UI的最终呈现得益于 Form模块的全自动渲染，她将原本普通的诸如select、checkbox、radio等元素重置为你所看到的模样。或许你可以移步左侧导航的内置模块中的表单对其进行详细的了解。

而本篇介绍的是表单元素本身，譬如规定的区块、CSS类、原始控件等。他们共同组成了一个表单体系。

下述是基本的行区块结构，它提供了响应式的支持。但如果你不大喜欢，你可以换成你的结构，但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。

标签区域原始表单元素区域输入框

required：注册浏览器所规定的必填字段 lay-verify：注册form模块需要验证的类型 class="layui-input"：layui.css提供的通用CSS类

这些在下文都不再做重复介绍

下拉选择框请选择一个城市北京上海杭州

上述option的第一项主要是占个坑，让form模块预留“请选择”的提示空间，否则将会把第一项（存在value值）作为默认选中项。你可以在option的空值项中自定义文本，如：请选择分类。

你可以通过设定 selected 来设定默认选中项：

北京上海（禁用效果）杭州

你还可以通过 optgroup 标签给select分组：

请选择你工作的第一个城市？你的工号？你最喜欢的老师？

以及通过设定属性 lay-search 来开启搜索匹配功能

layer form layim …… 属性selected可设定默认项属性disabled开启禁用，select和option标签都支持复选框默认风格：原始风格：

属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）属性checked可设定默认选中属性lay-skin可设置复选框的风格设置value="1"可自定义值，否则选中时返回的就是默认的on

开关

其实就是checkbox复选框的“变种”，通过设定 lay-skin="switch" 形成了开关风格

属性checked可设定默认开属性disabled开启禁用属性lay-text可自定义开关两种状态的文本设置value="1"可自定义值，否则选中时返回的就是默认的on

单选框

属性title可自定义文本属性disabled开启禁用设置value="xxx"可自定义值，否则选中时返回的就是默认的on

文本域

class="layui-textarea"：layui.css提供的通用CSS类

组装行内表单 - 范围 - 密码

class="layui-inline"：定义外层行内 class="layui-input-inline"：定义内层行内

忽略美化渲染

你可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格，比如：

…

一般不推荐这样做。事实上form组件所提供的接口，对其渲染过的元素，足以应付几乎所有的业务需求。如果忽略渲染，可能会让UI风格不和谐

表单方框风格

通过追加 layui-form-pane 的class，来设定表单的方框风格。内部结构不变。我们的Fly社区用的就是这个风格。

内部结构都一样，值得注意的是复选框/开关/单选框这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：单选框

结语

Layui版本稳定后，会抽空推出一个表单元素生成工具，这样似乎就更方便地组装你的表单了呀。

layui - 在每一个细节中，用心与你沟通

【本文地址】

表单

表单

今日新闻

推荐新闻